<html><title>An example of using layers</title>
<head>

<script language="Javascript" src="../gamelib/gamelib_core.js"></script>
<script language="Javascript" src="../gamelib/gamelib_mouse.js"></script>
<script language="Javascript">

function init(){

// first make 2 layers, called mylayer and mylayer2 (original, huh? :)
// they are both positioned at 50,150 and mylayer is 300 pixels wide,
// and mylayer2 is 200 pixels wide. mylayer2 has been filled with some
// html as it is created.

	mylayer=new Gl_layer(50,150,300,'');
	mylayer2=new Gl_layer(50,150,200,'<table width=250 height=150 cellpadding=0 cellspacing=0 border=0><tr><td height=150 width=250><center><font color="#ff0000" face="Arial" size=7>This is a layer!</font></center></td></tr></table>');

// limit their movement in the x and y axis mylayer is confined to 0 to 800 in x axis and -100 to 400 in y axis
// and mylayer2 is confined to 0 to 700 in x axis and 0 to 500 in y axis. In actual fact, since we set the
// dragType for mylayer to 1 later on, it cannot be dragged in the x axis anyway, so the limits have
// no real effect here. However, if the script did try to move it outside the limits, it would be contained
// within them.

mylayer.setXlimits(0,800);
mylayer.setYlimits(-100,400);

mylayer2.setXlimits(0,700);
mylayer2.setYlimits(0,500);

// give mylayer a background color, and mylayer2 a background image...

	mylayer.setBgcolor("#777788");
	mylayer2.setBackground("../images/lback0.gif");

// Set mylayer2 to an exact size (this is the same size as the background image, so
// it looks nice ;)

	mylayer2.resizeTo(250,150);

// move mylayer to 300,150 on screen, and load it with an external file called "test.html",
// the "true" argument after the filename means "always load the file from server, not cache"

	mylayer.moveTo(300,150);
	mylayer.load("test.html",false);

// make them both draggable

	mylayer.makeDraggable();
	mylayer2.makeDraggable();

// make mylayer only draggable in the y axis. So it can't be dragged sideways.

	mylayer.dragType("vertical");

// give mylayer an onclickdown event (changing background color in this example)

	mylayer.onclickdown="mylayer.setBgcolor('#aaaaff')";

// give mylayer an onclickup event (changing background color in this example)

	mylayer.onclickup="mylayer.setBgcolor('#777788')";

// give them onmouseover events (changing background color for mylayer, and locking mylayer2
// to it; and changing text and opacity for mylayer2 in this example)

	mylayer.onmouseover="mylayer.lockLayer(mylayer2);mylayer.setBgcolor('#9999bb')";
	mylayer2.onmouseover="mylayer2.setOpacity(80);mylayer2.write('<table width=250 height=150 cellpadding=0 cellspacing=0 border=0><tr><td height=150 width=250><center><font color=\"#00ff00\" face=\"Arial\" size=7>Hello Mr Mouse!</font></center></td></tr></table>')";

// give them onmouseout events (changing background color for mylayer,
// and changing text and opacity for mylayer2 in this example)

	mylayer.onmouseout="mylayer.setBgcolor('#777788')";
	mylayer2.onmouseout="mylayer2.setOpacity(60);mylayer2.write('<table width=250 height=150 cellpadding=0 cellspacing=0 border=0><tr><td height=150 width=250><center><font color=\"#ff0000\" face=\"Arial\" size=7>Goodbye then!</font></center></td></tr></table>')";

// make mylayer2 a little transparent. Making layers semi-transparent
// does slow things down a LOT, so don't make too many transparent!
// Opacity can range from 0 (completely transparent) to 100 (completely opaque),
// if you set it to 100, the gamelib removes the opacity filter to improve speed.

	mylayer2.setOpacity(60);

// create a mouse object called mymouse (you have to create a mouse object before
// any mouse event will work in the gamelib)

	mymouse=Ms_initmouse();

// that's it! You should now see two layers, that can be dragged around and will
// react to mouse events!

}

</script>
</head>

<body bgcolor="#000000" onload="init()">
<font color="#ffbb00" face="Arial" size=3>
<u>Layer library example 1</u><br><br>
<font size=2>
The small layer was created with some text<br>
inside it, and the large layer has been filled by<br>
loading an external file. They are both draggable,<br>
(the large one can only be dragged up and down)<br>
and react to mouse events! The smaller layer is<br>
locked to the large layer, so when you move the<br>
large layer, the small one will move too!<br><br>
They are also limited in their x and y axis.
</font>
</font>
</body>

</html>